<template>
	<view class="goodsView">
		<uni-forms ref="goodsForm" :model="goodFromData" :label-width="100" label-align="right" :rules="goodsRules">
			<uni-forms-item label="商品图片">
				<uni-file-picker v-model="goodFromData.thumb" fileMediatype="image" mode="grid"></uni-file-picker>
			</uni-forms-item>

			<uni-forms-item label="商品名称" required name="name">
				<uni-easyinput v-model="goodFromData.name" placeholder="请输入商品名称" trim="both"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="商品分类" required name="category_id">
				<uni-data-select collection="mall-categories" field="_id as value, name as text"
					v-model="goodFromData.category_id"></uni-data-select>
			</uni-forms-item>

			<uni-forms-item label="商品价格" required name="price">
				<uni-easyinput v-model="goodFromData.price" type="number" placeholder="请输入商品价格"
					trim="both"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="商品原价">
				<uni-easyinput v-model="goodFromData.before_price" type="number" placeholder="请输入商品原价"
					trim="both"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="商品属性">
				<u-cell :title="skuTitle" isLink :border="false" @click="clickSelect"></u-cell>
				<view class="skuList">
					<view class="item" v-for="(item,index) in goodFromData.sku_select" :key="index" @click="clickSelect">
						<view class="left">{{item.skuName}}：</view>
						<view class="right">{{childName(item.children)}}</view>
					</view>
				</view>
			</uni-forms-item>

			<uni-forms-item label="商品描述">
				<uni-easyinput v-model="goodFromData.description" type="textarea" placeholder="请输入商品描述"></uni-easyinput>
			</uni-forms-item>

			<view class="btnView">
				<button type="primary" @click="onSubmit">确认提交</button>
			</view>
		</uni-forms>

		<uni-popup ref="attrWrapPop" type="bottom">
			<view class="attrWrap">
				<view class="head">
					<view class="title">商品属性</view>
					<view class="addAttr" @click="clickaddAttr()">+ 添加属性</view>
				</view>

				<view class="body">
					<view class="item" v-for="(item,index) in skuArr" :key="index">
						<view class="top">
							<checkbox :checked="item.checked" @click="changeCheckBox(index)"></checkbox>
							<view class="font">{{item.skuName}}</view>
						</view>
						
						<view class="btnGroup" v-if="item.checked">
							<view class="btn" :class="child.checked?'active':''" v-for="(child,cIdx) in item.children" :key="cIdx" @click="clickChildBtn(index,cIdx)">{{child.name}}</view>
							<view class="btn">
								<u-icon name="plus" @click="clickaddAttr(index)"></u-icon>
							</view>
						</view>
					</view>
				</view>

				<view class="foot">
					<button type="primary" @click="clickComfirmSelect">确认选择</button>
				</view>

			</view>

			<view class="safe-area-bottom"></view>
		</uni-popup>
		
		<uni-popup ref="addAttrPop" type="dialog">
			<uni-popup-dialog  mode="input" title="新增"  placeholder="请输入新增内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	const skuCloudObject=uniCloud.importObject("mall-sku");
	const goodsCloudObject=uniCloud.importObject("mall-goods",{"customUI":true});
	let goodID;
	export default {
		
		data() {
			return {
				goodFromData: {
					name: "",
					thumb: [],
					category_id: null,
					price: null,
					before_price: null,
					description: "",
					sku_select:[]

				},
				goodsRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: "请输入产品名称"
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: "请输入商品价格"
						}]
					},
					category_id: {
						rules: [{
							required: true,
							errorMessage: "请选择产品分类"
						}]
					}
				},
				skuArr:[],
				addAttrType:"parent",
				addAttrIndex:null
			}
		},
		computed:{
			skuTitle(){
				if(this.goodFromData.sku_select.length){
					let arr=this.goodFromData.sku_select.map(item=>{
						return item.skuName;
					});
					return arr.join("/");
				}else{
					return "请点击添加属性"
				}
			}
		},
		onLoad(e) {
			goodID=e?.id ?? 	null;	
			if(goodID) this.getGoodsOne();
			
			if(this.skuArr.length) return;
			this.getSkuData();
		},
		methods: {
			async getGoodsOne(){
				let res=await goodsCloudObject.getOne(goodID);
				this.goodFromData=res.data[0];
			},
			childName(arr){
				let narr=arr.map(item=>{
					return item.name;
				});
				return narr.join("/");
			},
			clickaddAttr(index=null){
				if(index==null){
					this.addAttrType="parent";
					this.addAttrIndex=null;
				}else{
					this.addAttrType="child";
					this.addAttrIndex=index;
				}
				this.$refs.addAttrPop.open();
			},
			async dialogInputConfirm(e){
				if(!e) return;
				
				if(this.addAttrType=="parent"){
					let obj={
						skuName:e,
						checked:true,
						children:[]
					}
					
					let res=await skuCloudObject.add(obj);
					obj._id=res.id;
					
					this.skuArr.push(obj);
				}else if(this.addAttrType=="child"){
					let obj={
						name:e,
						checked:true
					}
					let id=this.skuArr[this.addAttrIndex]._id;
					await skuCloudObject.updateSkuChild(id,obj);
					
					this.skuArr[this.addAttrIndex].children.push(obj);
				}
				
				
			},
			changeCheckBox(index){
				this.skuArr[index].checked=!this.skuArr[index].checked;
			},
			clickChildBtn(index,cIdx){
				this.skuArr[index].children[cIdx].checked=!this.skuArr[index].children[cIdx].checked;
			},
			onSubmit() {
				this.$refs.goodsForm.validate().then(res => {
					this.toDataBase();
				}).catch(error => {
					console.log(error);
				})
			},
			async toDataBase(){
				this.goodFromData.thumb=this.goodFromData.thumb.map(item=>{
					return {
						url:item.url,
						name:item.name,
						extname:item.extname
					}
				});
				
				let toastTitle;
				if(goodID){
					toastTitle="修改成功"
					await goodsCloudObject.update(this.goodFromData);
				}else{
					toastTitle="新增成功"
					await goodsCloudObject.add(this.goodFromData);
				}
				
				
				uni.showToast({
					title:toastTitle
				});
				setTimeout(()=>{
					uni.navigateBack();
				},1500)
			},
			clickSelect() {
				this.$refs.attrWrapPop.open();
				this.arrSetCheck(this.skuArr,this.goodFromData.sku_select,"_id");
			
				
			},
			arrSetCheck(arr1,arr2,key){
				arr1.forEach(item=>{
					arr2.forEach(row=>{
						if(item[key]==row[key]){
							item.checked=true;
							if(item?.children?.length) this.arrSetCheck(item.children,row.children,"name");
						}
					})
				})
			},
			
			async getSkuData(){
				let res=await skuCloudObject.get();
				this.skuArr=res.data;
			},
			clickComfirmSelect(){
				let arr=this.skuArr.filter(item=>{
					let state=item.children.some(child=>child.checked);
					return item.checked&&state;
				}).map(item=>{
					let children=item.children.filter(child=>child.checked);
					return {
						...item,
						children
					}
				});
				this.goodFromData.sku_select=arr;
				this.$refs.attrWrapPop.close();
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.goodsView {
		padding: 30rpx;
		.skuList{
			.item{
				@include flex-box-set(start);
				padding: 30rpx;
				margin: 15rpx 0;
				background: $page-bg-color;
			}
		}
	}

	.attrWrap {
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;

		.head {
			@include flex-box();
			font-size: 34rpx;
			margin-bottom: 30rpx;

			.title {
				font-weight: bold;
			}

			.addAttr {
				color: $brand-theme-color-aux;
			}

		}
		
		.body{
			.item{
				border-top: 1px solid $border-color-light;
				&:last-child{
					border-bottom: 1px solid $border-color-light;
				}
				.top{
					padding: 30rpx 0;
					@include flex-box-set(start);
					.font{
						margin-left: 10rpx;
						font-weight: bold;
					}
				}
				.btnGroup{
					@include flex-box-set(start);
					padding: 10rpx 0 30rpx;
					flex-wrap: wrap;
					
					.btn{
						padding: 0 25rpx;
						border: 1px solid $border-color-light;
						height: 60rpx;
						margin-right: 20rpx;
						border-radius: 10rpx;
						color: $text-font-color-2;
						margin-bottom: 20rpx;
						@include flex-box-set();
						&.active{
							border-color: $brand-theme-color;
							color: $brand-theme-color;
							background: rgba(236, 87, 79, 0.1);
						}
					}
				}
				
			}
		}

		.foot {
			padding: 50rpx 200rpx;
		}
	}
</style>